<template>
<ul class='photo animated fadeIn'>
    <li class="" v-for='(item,index) in blogList' :key='item'>
        <h-swiper :list="item.blogImg"></h-swiper>
        <div class='other_box' style="padding:0 15px;">
            <div class='icon-box'>
                <i class="iconfont" style="font-size:25px;margin-right:15px;color:#333;display:inline-block;" :class='item.isActive?active:noActive'  @tap='toggleClass(index,item.blogId)'></i>
                <i class="iconfont icon-pinglun1" style="font-size:25px;" @tap='goBlogMsg(item.blogId)'></i>
                <!-- <i class="iconfont icon-fenxiang" style="font-size:25px;float:right;"></i> -->
                <!-- <button open-type='share'></button> -->
            </div>
            <div class='loveCount' style='font-weight:700;'>{{item.fabulousCount}}次赞</div>
            <div class='title'>{{item.title}} <span class="cls">{{item.className}}</span></div>
            <div class='reCount' v-if='item.reviewsCount!=0' @tap='goBlogMsg(item.blogId)'>共{{item.reviewsCount}}条评论</div>
            <div class="remark" v-if='item.hotCommit' @tap='goBlogMsg(item.blogId)'>
                <span class='remarkName' style='font-weight:700;'>{{item.hotCommit.commitName}}:</span>
                <span class='remarkContent'>{{item.hotCommit.commitBody}}</span>
                <!-- <i class="iconfont icon-zan" style="font-size:15px;float:right;"></i> -->
            </div>
            <div class='addRemark'>
                <!-- <img :src="userInfo.avatarUrl" alt=""> -->
                <view class="userinfo">
                    <view class="userinfo-avatar">
                        <open-data  type="userAvatarUrl"></open-data>
                    </view>
                </view>
                <input confirm-type='send' type="text" placeholder="添加评论..." @confirm="confirm(index,item.blogId)" v-model='commitBody'>
            </div>
            <div class='time'>
                3天前·发布
            </div>
        </div>
    </li>
</ul>

</template>

<script>
import HSwiper from 'components/swiper'
import { setTimeout } from 'timers'
import blog from '../../api/blog.js'

// import imgData from 'common/json/imgData.json'
export default {
  name: 'Photo',
  components: {
    HSwiper,
  },
  onShow () {
    // const that = this
    // that.isGif = !that.isGif
    // that.getList()
  },
  mounted () {
      this.getList()
      this.getUserInfo()
  },
  data () {
    return {
      list: ['https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture&str=1', 'https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture&str=2'],
      isGif: false,
      blogList:[],
      activeIndex:[],
      active:'icon-aixin active zan',
      noActive:"icon-aixinD",
      userInfo:"",
      commitBody:"",
      page:1,
      isToBottom:false //是否到达底部
    }
  },
  methods: {
    getUserInfo(){
        var that = this
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            //console.log(that.userInfo)
            // that.blessing()
            // // that.getOpenId()
          }
        })
    },
    async test () {
      var res = await blog.test()
      console.log(res)
    },
    async getList(){
        wx.showLoading({
            title: '加载中...',
            mask:true
        })
        var res = await wx.cloud.callFunction({name: 'getBlog',data: {page:this.page,row:2}})
        wx.hideLoading()
        console.log(JSON.parse(res.result).data)
        if(JSON.parse(res.result).data.length<2){
            this.isToBottom = true
        }
        this.blogList = this.blogList.concat(JSON.parse(res.result).data)
    },
    toggleClass (index,blogId) {
        if(this.activeIndex.indexOf(index)>-1){
            this.activeIndex.splice(this.activeIndex.indexOf(index),1)
            this.blogList[index].isActive = false
        }else{
            this.activeIndex.push(index)
            this.blogList[index].isActive = true
            this.addFabulous(index,blogId)
        }
    },
    async addFabulous(index,blogId){
        var res = await wx.cloud.callFunction({name: 'addFabulous',data: {userName:this.userInfo.nickName,blogId:blogId}})
        console.log(JSON.parse(res.result))
        let ret = JSON.parse(res.result)
        this.blogList[index].fabulousCount += 1
        // this.getList()
        if(!ret.success){
            wx.showToast({
                title: '您已点过赞咯~',
                icon: 'none',
                duration: 1000,
                mask: true
            })
            this.blogList[index].fabulousCount -= 1
        }
    },
    confirm(index,blogId){
        // console.log(this.commitBody)
        this.addCommit(index,blogId)
    },
    async addCommit(index,blogId){
        var res = await wx.cloud.callFunction({name: 'addCommit',data: {commitName:this.userInfo.nickName,commitBody:this.commitBody,avatar:this.userInfo.avatarUrl,blogId:blogId}})
        let ret = JSON.parse(res.result)
        if(ret.success){
            this.commitBody = ''
            this.blogList[index].reviewsCount += 1
            wx.showToast({
                title: '评论成功~',
                icon: 'none',
                duration: 1000,
                mask: true
            })
            // this.getList()
        }
    },
    goBlogMsg(blogId){
        var url = "../blogMsg/main?id=" + blogId
        wx.navigateTo({url})
    }
  },
    onPullDownRefresh () {
        wx.stopPullDownRefresh();
        // this.getList()
    },
    // 上拉加载，拉到底部触发
    onReachBottom() {
        if(this.isToBottom){
            console.log('到底了')
        }else{
            this.page+=1
            this.getList()
        }
    },
    onShareAppMessage: function (res) {
        return {
            path: '/pages/index/main',
            title:'俊和秋的请柬'
        }
    },
}
</script>
<style>
    .active{
        color:rgb(255, 66, 66)!important;
        /* transition:all .5s; */
    }
    .zan {
        animation: mymove .8s;
    }
    .userinfo {  
        position:relative;
        width:53rpx;
        height:53rpx;
        color:#fff;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-right:15rpx;
    }  
    
    .userinfo-avatar {  
        overflow:hidden;
        display:block;
        width:55rpx;
        height:55rpx;
        border-radius:50%;
    }  
    
    .userinfo{  
        font-size: 14px;  
        border-radius:50%;
    }
    @keyframes mymove{
        0%{
            transform: scale(0.9);
        }
        10%{
            transform: scale(1);
        }
        20%{
            transform: scale(1.2);
        }
        30%{
            transform: scale(1.1);
        }
        40%{
            transform: scale(1);
        }
        60%{
            transform: scale(1.03);
        }
        80%{
            transform: scale(1.02);
        }
        100%{
            transform: scale(1);
        }
    }
</style>

<style lang="stylus" scoped>

.photo
    height 100%
    li
        margin-bottom 10px
        .icon-box
            margin-top .2rem
            position relative
            i 
                display inline
        .other_box
            .loveCount
                font-size 13px
                font-weight 600
            .title  
                font-size 13px
                margin-top 3px
                .cls
                    color #61aeee
            .reCount
                font-size 13px
                margin-top 3px
                color #a9a9a9
            .remark
                font-size 13px
                margin-top 3px
                .remarkName
                    font-weight 500
            .addRemark
                font-size 13px
                margin-top 5px
                display flex
                .img     
                    position relative
                    width 25rpx
                    height 25rpx
                    color #fff
                    display flex
                    flex-direction column
                    align-items center
                    .icon
                        overflow hidden
                        display block
                        width 25rpx
                        height 25rpx
                        margin 20rpx
                        margin-top 50rpx
                        border-radius 50%
                        border 2px solid #fff
                        box-shadow 3px 3px 10px rgba(0, 0, 0, 0.2)
            .time
                font-size 13px
                margin-top 5px
                color #a9a9a9
 

</style>

